<template>
    <div class="container">
        <p class="oneP">知识付费的困局</p>
        <p class="twoP" style="font-weight:100">知识付费并喷施发展，同时大量公司深陷泥沼。</p>
        <!-- <button class="oneButton" @click="$router.push({path:''})">免费咨询</button> -->
        <button class="oneButton" @click.stop="consult">免费咨询</button>
        <ul class="ul1">
            <li v-for="(item,index) in arr1" :key="index"  @mouseover="show(index)">
                <div :class="{bg:index==liIndex,nobg:index!=liIndex}">
                    <img :src="item[0]" :class="{opa:liIndex==index}">
                    <img :src="item[1]" style="z-index:1">
                    <div :class="{initialmask: index!==liIndex}"></div>
                </div>
                <div :class="{border:index==liIndex}">
                    <img src="../../assets/img/1微信小程序/切图/9.png">
                    <p>{{item[2]}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
require("../../assets/css/p.css")
const img1 = require("../../assets/img/切图/知识付费/知识付费困局/1.png")
const img2 = require("../../assets/img/切图/知识付费/知识付费困局/2.png")
const img3 = require("../../assets/img/切图/知识付费/知识付费困局/3.png")
const img4 = require("../../assets/img/1微信小程序/切图/8.png")
const img5 = require("../../assets/img/1微信小程序/切图/12.png")
const img6 = require("../../assets/img/1微信小程序/切图/14.png")
import bus from '../../utils/bus'
export default {
    data(){
        return {
            arr1:[
                [img1,img4,"市场竞争激烈，同类产品大量涌现"],
                [img2,img5,"传统的营销方式转化率不高"],
                [img3,img6,"操作手续复杂，客户满意度低"]
            ],
            liIndex:1
        }
    },
    methods:{
        show(index){
            this.liIndex = index
        },
        consult(){
            bus.$emit('showConsult', true);
        }
    },
    mounted(){
        this.$el.addEventListener('click', () => {
            bus.$emit('showConsult', false)
        })
    }
}
</script>
<style scoped>
.container{
    width:1200px;
    margin: 0 auto;
    margin-top: 80px;
    overflow: hidden;
    text-align: center;
}
.ul1{
    overflow: hidden;
    margin-top: 60px;
    padding:10px
}
.ul1>li{
    width:360px;
    height: 300px;
    margin-left:50px;
    text-align: center;
    float: left;
    position: relative;
    box-shadow: 2px 2px 16px #ebebeb;
}
.ul1>li:first-child{
    margin-left: 0;
}
.ul1>li>div:nth-child(1){
    height: 220px;
}
.ul1>li>div:nth-child(2){
    height: 80px;
}
.ul1>li>div:nth-child(1)>img:nth-child(2){
    position: absolute;
    top:80px;
    left: 150px;
}
.ul1>li:nth-child(1)>div:nth-child(1)>img:nth-child(2){
    left: 144px;
}
.ul1>li>div:nth-child(2)>img:nth-child(1){
    margin-top: 20px;
}
.ul1>li>div:nth-child(2)>p:nth-child(2){
    margin-top: 24px;
    font-size: 16px;
    color:rgb(34, 34, 34);
}
.bg{
    background: url("../../assets/img/1微信小程序/切图/10.png");
}
.border{
    border:1px solid red;
    border-top: none;
}
.opa{
    opacity:0.2 ;
}
.oneButton {
    box-shadow: 0px 4px 19px #ed9191;
}

.initialmask {
    position: absolute;
    background-color: #000;
    opacity: 0.6;
    left: 0;
    top: 0;
    right: 0;
    bottom: 80px;
    display:block;
}
</style>